<template>
    <div class="all">
        <div style="margin-left: 10px;">
            <i class="el-icon-s-management"></i><span> 课表查询</span>
        </div>
        <el-card>
            <table class="table-name" border="1" cellspacing="0">
                <thead style="background-color:#67A1FF ;">
                    <td>时间</td>
                    <td v-for="item in daydata" :key="item">{{ item }}</td>
                </thead>
                <tbody>
                    <tr v-for="value in 10" :key="value">
                        <td>第{{ value }}节</td>
                        <td v-for="item in 7" :key="item">
                            <div v-html="getcourse(item + '-' + value)"></div>
                        </td>
                    </tr>

                </tbody>
            </table>
        </el-card>
    </div>
</template>

<script>
import { studenttimetable } from '@/api/student/courseSelect';
import { teachertimetable } from '@/api/teacher/search';
export default {
    data() {
        return {
            // 数据表格
            tableData: [],
            loading: false,
            daydata: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            kebiao:[]
        }
    },
    methods: {
        // 列表
        getlist() {
            this.loading = true
            teachertimetable().then(res => {
                this.loading = false
                res.data.forEach(item=>{
                    item.times=item.time.split('-').map(item=>Number(item))
                    // 接收转换过后的[4-1,4-2]等
                    item.list=[]
                    for (let i = 0; i < item.times[2]; i++) {
                        item.list.push(item.times[0]+"-"+(item.times[1]+i))
                    }
                })
               this.kebiao=res.data
            })

        },
        // 获取课表的在表格的位置匹配
        getcourse(val){
            let str=``
            this.kebiao.forEach(item=>{
                if(item.list.includes(val)){
                    str=`<div class="course-name"> ${item.courseName} </div>
                    <div>${item.teacherName} </div>
                    <idv>${item.location}</div>
                    `
                }
            }) 
            return str           
        }

    },
    mounted() {
        this.getlist()
    }
}
</script>

<style lang="scss" scoped>
.all {
    background-color: #ccc;
    height: 100%;
    width: 100%;

    .el-card {

        width: 98%;
        margin: 5px auto 0;

        table {
            width: 100%;
            text-align: center;
            margin:0 auto;
            tbody{
                background-color: #EAF2FF;
                td{
                    font-size: 12px;
                    color: #6D82A1;
                    width: 12.5%;
                    height: 58px;
                }
               ::v-deep .course-name{
                    font-size: 14px;
                    color: #000;
                }
            }
        }
    }
}
</style>